<template>
  <div style="position: relative">
    <input class="select_date" v-model="defaultActive" @focus="inputFocuse"/>
    <i :style="{transform:popupShow ? 'translateY(-50%)  rotate(-90deg)' : '  translateY(-50%)  rotate(90deg)'}"
       class="select_date_arrow van-icon van-icon-arrow van-cell__right-icon"></i>
    <van-popup v-model="popupShow" position="bottom">
      <div class="select_quarter" v-for="item in quarterList" :key="item.quarterNumber"
           :class="{quarterActive:item.title === defaultActive}" @click="dateConfirm(item)">{{ item.title }}
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "selectQuarter",
  props: {
    data: {},
    timeValue: {},
    type: {
      type: String,
      default: 'date'
    }
  },
  data() {
    return {
      popupShow: false,
    }
  },
  computed: {
    quarterList() {
      return (this.data.quarter_list || []).map(item => {
        const obj = {
          1: '第一季度',
          4: '第二季度',
          7: '第三季度',
          10: '第四季度'
        }
        item.title = obj[item.quarterNumber]
        return item
      })
    },
    defaultActive() {
      const active = this.data.one
      const obj = {
        1: '第一季度',
        4: '第二季度',
        7: '第三季度',
        10: '第四季度'
      }
      return active ? obj[active.quarterNumber] : ''
    }
  },
  methods: {
    inputFocuse() {
      document.activeElement.blur();
      this.popupShow = true
    },
    dateConfirm(value) {
      this.popupShow = false
      this.$emit('confirm', value)
    }
  }
}
</script>

<style lang="less" scoped>
.select_date {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  border: 1px solid #c3c5cb;
  font-size: 16px;
  padding: 0 15px;
  box-sizing: border-box;
  color: #333;
}

.select_date:focus {
  border: 1px solid #4e96de;
  transition: all .3s;
}

.select_date_arrow {
  position: absolute;
  right: 10px;
  font-size: 22px;
  top: 50%;
  transition: all .3s ease;
}

.select_quarter {
  font-size: 16px;
  padding: 10px 0;
  line-height: 30px;
  text-align: center;
  border-bottom: 1px solid #eeeeee;
  color: #323233;
}

.quarterActive {
  color: #4e96de;
}
</style>
